<template>
  <nav class="navbar">
    <div class="container">
      <a href="#" class="brand">项目管理系统</a>
      <ul class="menu">
        <li class="dropdown">
          <router-link to="/project-management/list" class="link" @mouseover="toggleDropdown" @mouseout="hideDropdown">项目管理</router-link>
          <ul v-if="showDropdown" class="submenu">
            <li><router-link to="/project-management/list" active-class="active">项目仓库</router-link></li>
            <li><router-link to="/project-management/create">创建项目</router-link></li>
          </ul>
        </li>
        <li><router-link to="/module-management" class="link">模块管理</router-link></li>
        <li><router-link to="/interface-management" class="link">接口管理</router-link></li>
        <li><router-link to="/create-interface" class="link">创建接口</router-link></li>
      </ul>
    </div>
  </nav>
</template>
<script>
export default {
  name: 'Navbar',
  data() {
    return {
      showDropdown: false
    };
  },

  methods: {
    toggleDropdown() {
      this.showDropdown = true; // 显示下拉菜单
    },
    hideDropdown() { this.hideTimer = setTimeout(() => {
        this.showDropdown = false;
      }, 1000); // 延迟 100 毫秒后隐藏
    },
  }
}
</script>
<style scoped>
.navbar {
  background-color: #333;
  color: white;
  padding: 10px 20px;
  height: 60px; /* 设置固定高度 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* 设置容器宽度为 100% */
  max-width: 1200px; /* 设置最大宽度 */
  margin: 0 auto; /* 居中 */
  padding: 0 20px; /* 内容左右两侧的内边距 */
}

.brand {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5em;
  font-weight: bold;
}

.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu li {
  position: relative;
  margin-left: 20px; /* 改为左侧间距 */
}

.menu a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
  padding: 5px 10px;
}

.menu a:hover {
  color: #ddd;
}

.dropdown:hover .submenu {
  display: block;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.submenu li {
  margin: 0;
}

.submenu a {
  display: block;
  padding: 5px 10px;
  color: white;
  text-decoration: none;
}

.submenu a:hover {
  background-color: #f1f1f1;
  color: #333;
}
</style>